import {
    Image,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    TextInput,
    KeyboardAvoidingView, Platform
} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect} from "react";
import Avator from "@/assets/images/me/avator.png"
import LikeIcon from "@/assets/images/releaseImg/likeIcon.png"
import helpImage from "@/assets/images/releaseImg/helpImage.png";
import emoIcon from "@/assets/images/releaseImg/emoIcon.png"
import Entypo from '@expo/vector-icons/Entypo';
import { useActionSheet } from '@expo/react-native-action-sheet';

export default function settingScreen() {

    const router = useRouter();
    const { showActionSheetWithOptions } = useActionSheet();

    useEffect(() => {
    }, []);

    const close = function () {
        const options = ['删除需求', '关闭需求', '取消'];
        const cancelButtonIndex = 2;

        showActionSheetWithOptions(
            {
                options,
                cancelButtonIndex,
            },
            (buttonIndex) => {
                if (buttonIndex === 0) {
                    alert('删除需求');
                } else if (buttonIndex === 1) {
                    alert('关闭需求');
                }
            }
        );
    }

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            keyboardVerticalOffset={Platform.OS === 'ios' ? 70 : 0} // 可根据需求调整
            style={{ flex: 1, }}
        >
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '详情', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#F7F7F7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                    headerRight: () => (
                        <TouchableOpacity onPress={close}>
                            <Entypo name="dots-three-vertical" size={16} color="black" />
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView style={{ paddingHorizontal: 12, }}>
                <View style={styles.resoureContainer}>
                    <View style={styles.headerInfo}>
                        <View style={styles.avator}>
                            <Image source={Avator} style={{ width: "100%", height: '100%' }} />
                        </View>
                        <View style={styles.infoRight}>
                            <View>
                                <Text style={styles.name}>郑红喂</Text>
                            </View>
                            <View>
                                <Text style={styles.date}>
                                    更新于 2024/12/21 10:19
                                </Text>
                            </View>
                        </View>
                    </View>
                    <View style={styles.content}>
                        <Text style={styles.contentText}>我有场地【场地空间合作】寻各类型活动及内容方进驻</Text>
                    </View>
                </View>
                <View style={{ marginBottom: 10, }}>
                    <View style={styles.leaveMessageContainer}>
                        <Text style={styles.leaveMessageText}>
                            应答留言
                        </Text>
                        <Text style={styles.messageTotal}>(50)</Text>
                        <View style={styles.heng}></View>
                    </View>
                </View>
                <View style={styles.messageList}>
                    <View style={styles.messageItem}>
                        <View style={styles.messageHeader}>
                            <View style={styles.messageAvator}>
                                <Image source={Avator}  style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.messageName}>
                                <Text>和晓庆</Text>
                            </View>
                            <TouchableOpacity>
                                <View style={styles.help}>
                                    <Image source={LikeIcon} style={{ width: 8, height: 9, }} />
                                    <Text style={styles.helpText}>帮到我</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.messageFooter}>
                        <View style={styles.messageFooterLeft}>
                            <Text style={styles.messageFooterLeftText}>留言：</Text>
                        </View>
                        <View style={styles.messageFooterRight}>
                            <Text style={styles.messageFooterRightText}>
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                            </Text>
                        </View>
                    </View>
                </View>


                <View style={styles.messageList}>
                    <View style={styles.messageItem}>
                        <View style={styles.messageHeader}>
                            <View style={styles.messageAvator}>
                                <Image source={Avator}  style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.messageName}>
                                <Text>和晓庆</Text>
                            </View>
                            <View style={styles.helpImage}>
                                <Image source={helpImage} style={{ width: "100%", height: "100%" }} />
                            </View>
                            {
                                false && (
                                    <TouchableOpacity>
                                        <View style={styles.help}>
                                            <Image source={LikeIcon} style={{ width: 8, height: 9, }} />
                                            <Text style={styles.helpText}>帮到我</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                    </View>
                    <View style={styles.messageFooter}>
                        <View style={styles.messageFooterLeft}>
                            <Text style={styles.messageFooterLeftText}>留言：</Text>
                        </View>
                        <View style={styles.messageFooterRight}>
                            <Text style={styles.messageFooterRightText}>
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                            </Text>
                        </View>
                    </View>
                </View>

                <View style={styles.messageList}>
                    <View style={styles.messageItem}>
                        <View style={styles.messageHeader}>
                            <View style={styles.messageAvator}>
                                <Image source={Avator}  style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.messageName}>
                                <Text>和晓庆</Text>
                            </View>
                            <View style={styles.helpImage}>
                                <Image source={helpImage} style={{ width: "100%", height: "100%" }} />
                            </View>
                            {
                                false && (
                                    <TouchableOpacity>
                                        <View style={styles.help}>
                                            <Image source={LikeIcon} style={{ width: 8, height: 9, }} />
                                            <Text style={styles.helpText}>帮到我</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                    </View>
                    <View style={styles.messageFooter}>
                        <View style={styles.messageFooterLeft}>
                            <Text style={styles.messageFooterLeftText}>留言：</Text>
                        </View>
                        <View style={styles.messageFooterRight}>
                            <Text style={styles.messageFooterRightText}>
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.messageList}>
                    <View style={styles.messageItem}>
                        <View style={styles.messageHeader}>
                            <View style={styles.messageAvator}>
                                <Image source={Avator}  style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.messageName}>
                                <Text>和晓庆</Text>
                            </View>
                            <View style={styles.helpImage}>
                                <Image source={helpImage} style={{ width: "100%", height: "100%" }} />
                            </View>
                            {
                                false && (
                                    <TouchableOpacity>
                                        <View style={styles.help}>
                                            <Image source={LikeIcon} style={{ width: 8, height: 9, }} />
                                            <Text style={styles.helpText}>帮到我</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                    </View>
                    <View style={styles.messageFooter}>
                        <View style={styles.messageFooterLeft}>
                            <Text style={styles.messageFooterLeftText}>留言：</Text>
                        </View>
                        <View style={styles.messageFooterRight}>
                            <Text style={styles.messageFooterRightText}>
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.messageList}>
                    <View style={styles.messageItem}>
                        <View style={styles.messageHeader}>
                            <View style={styles.messageAvator}>
                                <Image source={Avator}  style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.messageName}>
                                <Text>和晓庆</Text>
                            </View>
                            <View style={styles.helpImage}>
                                <Image source={helpImage} style={{ width: "100%", height: "100%" }} />
                            </View>
                            {
                                false && (
                                    <TouchableOpacity>
                                        <View style={styles.help}>
                                            <Image source={LikeIcon} style={{ width: 8, height: 9, }} />
                                            <Text style={styles.helpText}>帮到我</Text>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                    </View>
                    <View style={styles.messageFooter}>
                        <View style={styles.messageFooterLeft}>
                            <Text style={styles.messageFooterLeftText}>留言：</Text>
                        </View>
                        <View style={styles.messageFooterRight}>
                            <Text style={styles.messageFooterRightText}>
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                                我有场地【场地空间合作】寻各类型活动及内容方 进驻
                            </Text>
                        </View>
                    </View>
                </View>

            </ScrollView>

            <View style={styles.bottomSendMessageContainer}>
                <View style={styles.bottomInpt}>
                    <TextInput style={styles.inpt} />
                    <TouchableOpacity>
                        <View style={styles.emoIcon}>
                            <Image source={emoIcon} style={{ width: "100%", height: "100%" }} />
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
        </KeyboardAvoidingView>

    );
}

const styles = StyleSheet.create({
    avator: {
        width: 36,
        height: 36,
    },
    headerInfo: {
        flexDirection: "row",
        alignItems: "center",
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
        paddingBottom: 12,
    },
    resoureContainer: {
        // padding: 12,
    },
    infoRight: {
        marginLeft: 10,
    },
    date: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    name: {
        fontSize: 12,
        marginBottom: 2,
    },
    content: {
        marginTop: 10,
        height: 86,
        width: "100%",
    },
    contentText: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    leaveMessageContainer: {
        flexDirection: "row",
        position: "relative",
        zIndex: 21
    },
    heng: {
        position: "absolute",
        width: 16 * 4,
        height: 5,
        left:0,
        bottom: 2,
        backgroundColor: "#EC6138",
        opacity: 1
    },
    leaveMessageText: {
        zIndex: 30,
        fontSize: 16,
    },
    messageTotal: {
        fontSize: 16,
        fontWeight: "bold",
        marginLeft: 2,
    },
    messageList: {
        paddingTop: 10,
        marginBottom: 10,
        backgroundColor: "#fff",
        borderRadius: 8,
    },
    messageItem: {
        // backgroundColor: "#fff",
        padding: 10,

    },
    messageHeader: {
        flexDirection: 'row',
        alignItems: "center",
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC",
        paddingBottom: 10,
    },
    messageAvator: {
        width: 36,
        height: 36,
    },
    messageName: {
        flex: 1,
        marginLeft: 10,
    },
    help: {
        paddingVertical: 6,
        paddingHorizontal: 8,
        backgroundColor: "#EC6138",
        borderRadius: 13,
        flexDirection: "row",
        alignItems: "center",
    },
    helpText: {
        color: "#fff",
        fontSize: 10,
        marginLeft: 2,
    },
    messageFooter: {
        flexDirection: "row",
        paddingHorizontal: 12,
        paddingBottom: 12,
    },
    messageFooterRight: {
        flex: 1,
    },
    messageFooterLeft: {

    },
    messageFooterLeftText: {
        color: "#676978",
        fontSize: 12,
    },
    messageFooterRightText: {
        color: "#676978",
        fontSize: 12,
    },
    helpImage: {
        width: 50,
        height: 50,
    },
    bottomSendMessageContainer: {
        backgroundColor: "#fff",
        paddingBottom: 39,
        paddingTop: 10,
        borderTopColor: "#676978",
        borderTopWidth: 0.1
    },
    bottomInpt: {
        width: 351,
        height: 34,
        margin: "auto",
        backgroundColor: "#F7F8F9",
        borderRadius: 8,
        flexDirection: "row",
        alignItems:"center",
        paddingRight: 12,
        paddingLeft: 12,
    },
    inpt: {
        flex: 1,
    },
    emoIcon: {
        width: 22,
        height: 22,
    },
});
